<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body class="text-center">
<form class="form-signin">
    <h1 class="h3 mb-3 font-weight-normal">请登录</h1>
    <label for="username" class="sr-only">用户名：</label>
    <input type="text" id="username" class="form-control" placeholder="" required="required" autofocus="">
    <label for="password" class="sr-only">密码：</label>
    <input type="password" id="password" class="form-control" placeholder="" required="required">
    <div class="verify-div">
        <label for="verify-code" class="sr-only">验证码：</label>
        <input type="text" id="verify-code" style="width: 50%;" class="form-control" placeholder="" required="required">
        <a href="#" onclick="changeVerifyCode()"><img id="imgObj" alt="验证码" src="/getVerifyCode"></a>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit" id="submit">登录</button>
</form>
</body>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("#submit").click(function (event) {
            // 阻止表单默认提交
            event.preventDefault();

            var username = $("#username").val(), password = $("#password").val(),verifyCode=$("#verify-code").val();
            if(username==""){
                alert("用户名不能为空！");
                return;
            }
            if(password==""){
                alert("密码不能为空！");
                return;
            }
            if(verifyCode==""){
                alert("验证码不能为空！");
                return;
            }

            // 提交验证
            $.ajax({
                type: "POST",
                url: "/checkLogin",
                data: {
                    "username": username,
                    "password": password,
                    "verifyCode": verifyCode
                },
                success: function (result) {
                    if(result=='success'){
                        window.location.href="http://localhost:8080/success.html";
                    }else{
                        alert(result);
                    }
                }
            });


        });
    });

    function changeVerifyCode() {
        var imgSrc = $("#imgObj");
        var src = imgSrc.attr("src");
        imgSrc.attr("src", chgUrl(src));
    }

    // 时间戳
    // 为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳
    function chgUrl(url) {
        var timestamp = (new Date()).valueOf();
        url = url.substring(0, 20);
        if ((url.indexOf("&") >= 0)) {
            url = url + "×tamp=" + timestamp;
        } else {
            url = url + "?timestamp=" + timestamp;
        }
        return url;
    }

</script>
</html>